<template>
	<view class="content" v-if="isSohw">
		<view class="tabcard">
			<view class="tabcarda" v-for="index in constData.consumption_times" :key="index" @click="setSwitch(index)"
				:class="position === index ? 'pitchOn' : ''">次卡第{{ index + 1 }}次</view>
		</view>
		<view class="defrevese">
			<view class="top">
				<view class="noworder" v-if="constData.timesCardList[position]">{{
					reserveState(constData.timesCardList[position].status)
				}}</view>
				<view class="noworder" v-if="constData.status === 5 && !constData.timesCardList[position]">退款完成</view>
				<view class="noworder" v-if="constData.status === 4 && !constData.timesCardList[position]">退款中</view>
				<view class="noworder" v-if="
					!constData.timesCardList[position] &&
					constData.status !== 4 &&
					constData.status !== 5
				">待预约
				</view>
				<view @click.stop="getToPay(constData.order_id)" v-if="constData.timesCardList[position].status === 1"
					class="delete">继续支付</view>
				<view @click.stop="
					theOrder(
						constData.order_id,
						constData.timesCardList[position].times_no
					)
					" v-if="constData.timesCardList[position].status === 11" class="delete"
					style="color: #ff9900; border-color: #ff9900">确认服务完成</view>
			</view>
			<view @click="getPopUp" v-if="
				!constData.timesCardList[position] &&
				constData.status !== 5 &&
				constData.status !== 4
			" class="yybuttn">立即预约
			</view>
		</view>
		<view class="address" v-if="
			constData.timesCardList &&
			constData.timesCardList[position] &&
			constData.timesCardList[position].status !== 2
		">
			<view v-if="constData.timesCardList[position].reservation_time" class="yyxx">预约信息</view>
			<view v-if="constData.timesCardList[position].address_id" class="additionOf">
				<view class="rem_text flexC">
					联系人:
					<text>{{ constData.timesCardList[position].address.name }}</text>
				</view>
				<view class="rem_text flexC">
					联系方式:
					<text>{{ constData.timesCardList[position].address.tel }}</text>
				</view>
				<view class="rem_text flexC">
					服务地址:
					<text>{{ constData.timesCardList[position].address.address_title
						}}{{ constData.timesCardList[position].address.address }}</text>
				</view>
			</view>
			<view v-if="
				constData.timesCardList &&
				constData.timesCardList[position] &&
				constData.timesCardList[position].reservation_time
			" class="remarks">
				<view class="rem_text flexC">
					上门时段:
					<text>{{
						formatTime(constData.timesCardList[position].reservation_time)
					}}</text>
				</view>
				<view class="rem_text flexC">
					预约备注:
					<text>{{ constData.timesCardList[position].remark }}</text>
				</view>
			</view>
			<view v-if="constData.timesCardList[position].status === 8" class="delete1"
				@click="revesopen(constData.order_id)"
				style="color: #fffff; background-color: #ff9900; border-color: #ff9900">修改预约时间</view>
		</view>
		<view v-if="
			constData.timesCardList &&
			constData.timesCardList[position] &&
			constData.timesCardList[position].status !== 1 &&
			constData.timesCardList[position].status !== 7 &&
			constData.timesCardList[position].status !== 2 &&
			constData.timesCardList[position].poi_name != null
		" class="mendian">
			<view class="mdname">
				<view>门店名称：</view>
				<view>{{ constData.timesCardList[position].poi_name }}</view>
			</view>
			<view @click="phoneCall(constData.timesCardList[position].merchant_tel)" class="order_h">
				<view>联系商家</view>
				<view class="refund">
					<image src="@/static/image/home/telephone.png" mode=""></image>
					{{ constData.timesCardList[position].merchant_tel }}
				</view>
			</view>
		</view>
		<view class="pro_item">
			<image :src="constData.orderItem[0].img_url" mode=""></image>
			<view class="pro_text">
				<view class="pro_textchild" style="font-weight: 600">{{
					constData.orderItem[0].title
				}}</view>
				<view v-show="constData.orderItem[1]" class="fu_textle">
					<view>加购：{{ constData.orderItem[1].title }}*{{
						constData.orderItem[1].quantity
					}}</view>
					<view>￥{{
						constData.orderItem[1].price * constData.orderItem[1].quantity
					}}</view>
				</view>
				<view class="pro_button">
					<button :data-order-id="constData.order_id" data-im-type="order" :data-im-id="dataImId"
						open-type="im">
						联系客服
					</button>
					<view class="refundBtn" v-if="constData.timesCardList[position].status === 5">退款完成</view>
					<view class="refundBtn" v-if="constData.timesCardList[position].status === 4">退款中</view>
					<view class="refundBtn" v-if="constData.status === 4 && !constData.timesCardList[position]">退款中
					</view>
					<view class="refundBtn" v-if="constData.status === 5 && !constData.timesCardList[position]">退款完成
					</view>
					<view class="refundBtn" @click="toRefund" v-if="
						constData.status !== 5 &&
						constData.status !== 4 &&
						constData.timesCardList[position].status !== 5 &&
						constData.timesCardList[position].status !== 4 &&
						constData.timesCardList[position].status !== 7 &&
						constData.timesCardList[position].status !== 1 &&
						constData.timesCardList[position].status !== 6 &&
						constData.timesCardList[position].status !== 11
					">
						申请退款</view>
				</view>
			</view>
		</view>
		<view class="orderCost">
			<view class="order_f">
				订单费用
				<text class="status">({{ constData.status === 1 ? "未支付" : "已支付" }})</text>
			</view>
			<view v-if="constData.status !== 1" class="order_y">应付款：<text>￥{{ constData.payment_money || 0 }}</text>
			</view>
			<view v-if="constData.status === 1" class="order_y">应付款：<text>￥{{ constData.price || 0 }}</text></view>
		</view>
		<view class="rexian">
			<view class="wenzi">平台热线(工作时间8:00-23:00)</view>
			<view class="phone" :style="{ display: 'flex' }">
				<view class="anniuphone" @click="phoneCall(item.number)" v-for="item in constData.phoneList"
					:key="item.id">{{ item.name }}</view>
			</view>
		</view>
		<view class="orderGoods">
			<view v-if="constData.status !== 1 && constData.status !== 7" @click="phoneCall(constData.headquarter_tel)"
				class="order_h">
				<view>联系客服</view>
				<view class="refund">
					<image src="@/static/image/home/telephone.png" mode=""></image>
					{{ constData.headquarter_tel }}
				</view>
			</view>
			<view class="order_h">
				<view>订单编号</view>
				<view class="refund">
					{{ constData.order_sn }}
					<text @click="clipboard(constData.order_sn)">复制</text>
				</view>
			</view>
			<view class="order_h">
				<view>下单时间</view>
				<view class="refund">{{ constData.createtime }}</view>
			</view>
		</view>
		<uv-popup round="15" mode="center" ref="popup" :safeAreaInsetBottom="false">
			<view class="refudPop">
				<view class="refundtop">
					<view class="tishi">提示</view>
					<view @click="closeRefund" class="refundclsoe">X</view>
				</view>
				<view class="refuncent">{{ constData.refundPs }}</view>
				<!-- <view class="rexian"> -->
				<view class="wenzi">平台热线(工作时间8:00-18:00)</view>
				<view class="phone" :style="{ display: 'flex' }">
					<view class="anniuphone" @click="phoneCall(item.number)" v-for="item in constData.phoneList"
						:key="item.id">{{ item.name }}</view>
				</view>
				<!-- </view> -->
			</view>
		</uv-popup>
		<view :style="{ height: $getBottomHight() + 100 + 'rpx' }"></view>
	</view>
</template>

<script>
import selectTime from "@/components/selectTime/selectTime.vue";
import throttle from "@/utils/throttle.js";
import { getTmdhms, setState } from "@/utils/tools.js";
import { mapGetters } from "vuex";
import { getOrderDetails, getOrderConfirm } from "@/api/home.js";
import { setTiktokIm } from "@/api/my.js";
export default {
	components: {
		selectTime,
	},
	data() {
		return {
			id: null,
			constData: {},
			show: false,
			isSohw: false,
			dataImId: "64405815494",
			reservation_time: "",
			position: 0,
		};
	},
	computed: {
		...mapGetters("user", ["isLogin"]),
	},
	onLoad(option) {
		this.id = option.id;
		if (!this.isLogin) {
			uni.navigateTo({
				url: "/pages/login/login",
			});
			return false;
		}
		this.getTiktokIm();
	},
	onShow() {
		this.rderDetails(this.id);
	},
	methods: {
		closeRefund() {
			this.$refs.popup.close();
		},
		reserveState(status) {
			return setState(status);
		},
		formatTime(timestamp) {
			return getTmdhms(timestamp);
		},
		setSwitch(index) {
			this.position = index;
		},
		getPopUp() {
			uni.navigateTo({
				url: "/pages/reservation/reservation?id=" + this.id,
			});
		},
		toRefund() {
			if (this.constData.timesCardList.length > 0 && this.constData.timesCardList[0].status === 11) {
				this.$refs.popup.open('center');
			} else {
				uni.navigateTo({
					url: "/pages/refund/refund?id=" + this.id,
				});
			}
		},
		phoneCall(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber,
			});
		},
		revesopen(id) {
			uni.navigateTo({
				url: "/pages/modify/modify?id=" + id,
			});
		},
		getTiktokIm() {
			setTiktokIm().then((res) => {
				if (res.code === 1) {
					this.dataImId = res.data;
				}
			});
		},
		// 确认订单
		theOrder(id, ckid) {
			uni.showModal({
				title: "提示",
				content: this.constData.refundConfirm,
				success: (res) => {
					if (res.confirm) {
						getOrderConfirm({
							order_id: id,
							timesNo: ckid,
						}).then((res) => {
							if (res.code === 1) {
								this.$showToast("确认成功！");
								this.rderDetails(this.id);
							} else {
								this.$showToast(res.msg);
							}
						});
					}
				},
			});
		},
		toReview(id) {
			uni.navigateTo({
				url: "/pages/uploadReview/uploadReview?orderId=" + id,
			});
		},
		error(res) { },
		getToPay: throttle(function (id) {
			tt.continueToPay({
				orderId: id,
				success: (res) => {
					this.$showToast("支付成功");
					this.rderDetails(this.id);
				},
				fail: (res) => {
					this.$showToast("支付失败, 请重新下单");
				},
			});
		}, 600),
		clipboard(data) {
			uni.setClipboardData({
				data: data,
				success: () => {
					this.$showToast("复制成功");
				},
			});
		},
		rderDetails(id) {
			getOrderDetails({
				id: id,
			}).then((res) => {
				if (res.code === 1) {
					this.constData = res.data;
					let TimeDays = 1000 * 60 * 60 * 24 * 3;
					this.constData.orderTime = Number(new Date()) + TimeDays;
					this.isSohw = true;
				} else {
					this.$showToast(res.msg);
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
.jdt::v-deep {
	margin-bottom: 28rpx;

	.uv-steps {
		justify-content: center;

		.uv-steps-item__wrapper {
			background-color: #f4f4f4;
		}
	}
}

.refudPop {
	width: 600rpx;
	height: 440rpx;

	.refundtop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 36rpx;

		.tishi {
			color: #ff9900;
		}

		.refundclsoe {
			color: #ff5100;
		}
	}

	.refuncent {
		margin-top: 60rpx;
		padding: 0 20rpx;
		font-size: 36rpx;
	}

	.wenzi {
		padding: 20rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.phone {
		padding: 10px;
		padding-top: 0;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.anniuphone {
		width: 160rpx;
		height: 40rpx;
		border: 1px solid #ff9900;
		border-radius: 44rpx;
		text-align: center;
		color: #ff9900;
		font-size: 30rpx;
		margin-top: 16rpx;
	}
}

.refundBtn {
	display: inline-block;
	color: #606060;
	border: 1rpx solid #ccc;
	height: 56rpx;
	padding: 0 32px;
	border-radius: 56rpx;
	font-size: 28rpx;
	line-height: 56rpx;
}

.textyiwen {
	color: #ff9900;
	font-size: 30rpx;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 20rpx;

	.anniuphone,
	.lastPhone {
		width: 200rpx;
		height: 44rpx;
		border: 1px solid #ff9900;
		border-radius: 76rpx;
		text-align: center;
		margin-top: 4rpx;
	}
}

.check {
	text-align: center;
	margin-top: 20rpx;

	image {
		width: 420rpx;
		height: 420rpx;
	}
}

.title_text {
	margin-bottom: 20rpx;
	font-size: 38rpx;
	letter-spacing: 2rpx;
	padding: 0 40rpx;
}

.delete {
	height: 72rpx;
	padding: 0 50rpx 0 50rpx;
	font-size: 28rpx;
	border-radius: 75rpx;
	color: #ff9900;
	border: 1rpx solid #ff9900;
	font-weight: bold;
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choice {
	.title {
		color: #1c2023;
		font-size: 28rpx;
		font-weight: bold;
		width: 150rpx;
	}

	.rightIcon {
		width: 20rpx;
		height: 20rpx;
	}
}

.yuyue {
	height: 72rpx;
	padding: 0 50rpx 0 50rpx;
	font-size: 28rpx;
	border-radius: 75rpx;
	background-color: #ff9900;
	color: #ffffff;
	border: 1rpx solid #ff9900;
	font-weight: bold;
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: fit-content;
	margin: 0;
	height: 75rpx;
	font-size: 28rpx;
	color: #ff9900;
	font-weight: bold;
	padding: 0 50rpx 0 50rpx;
	display: flex;
	align-items: center;
	border: 1rpx solid#ff9900;
	justify-content: center;
	border-radius: 75rpx;
	background: #fff;
}

button::after {
	border: none;
}

.orderGoods {
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;

	.order_h {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;

		.refund {
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				padding: 6rpx 8rpx;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.orderCost {
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;

	.order_f {
		font-size: 32rpx;
		margin-left: 25rpx;

		.status {
			font-size: 28rpx;
			color: #c0c4cc;
			padding-left: 10rpx;
		}
	}

	.order_y {
		font-size: 30rpx;
		margin-right: 25rpx;

		text {
			font-weight: bold;
		}
	}
}

.promt {
	color: #ff9900;
	font-size: 24rpx;
	margin-top: 20rpx;
	font-size: 26rpx;
	padding-left: 5%;
	padding-right: 5%;
}

.rexian {
	background-color: #fff;
	width: 95%;
	margin: 20rpx auto 0 auto;
	border-radius: 20rpx;
	font-size: 30rpx;

	.wenzi {
		padding: 20rpx;
	}

	.phone {
		padding: 10px;
		padding-top: 0;
		justify-content: space-between;
	}

	.anniuphone {
		width: 160rpx;
		height: 40rpx;
		border: 1px solid #ff9900;
		border-radius: 44rpx;
		text-align: center;
		color: #ff9900;
	}
}

.mendian {
	background-color: #fff;
	width: 95%;
	margin: 20rpx auto 0 auto;
	border-radius: 20rpx;
	font-size: 30rpx;
	border: 1px solid #ff9900;

	.mdname {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;
		padding-bottom: 0;
	}

	.order_h {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;

		.refund {
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				padding: 6rpx 8rpx;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.order_state {
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;
	font-size: 32rpx;
	padding: 32rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.nowstate {
		margin-left: 24rpx;
	}

	.noworder {
		margin-right: 24rpx;
		color: #ff9900;
	}
}

.pro_item {
	display: flex;
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;
	padding: 20rpx 0;
	font-size: 30rpx;

	image {
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
	}

	.price_text {
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_item {
		font-size: 26rpx;
		color: #c0c4cc;
		margin-top: 10rpx;
	}

	.pro_text {
		margin: 0 20rpx;
		flex: 1;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.fu_textle {
			display: flex;
			color: #c0c4cc;
			font-size: 28rpx;
			padding: 16rpx 0;
			justify-content: space-between;
		}

		button {
			display: inline-block;
			color: #ff9900;
			border: 1px solid #ff9900;
			height: 28px;
			padding: 0 16px;
			border-radius: 28px;
			font-size: 14px;
			line-height: 28px;
			background: #ffffff;
		}

		button::after {
			border: none;
		}

		.pro_textchild {
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.pro_button {
			display: flex;
			justify-content: space-around;
		}
	}
}

.tabcard {
	width: 95%;
	height: 66rpx;
	background-color: white;
	display: flex;
	justify-content: space-between;
	margin: 30rpx auto 0 auto;

	.tabcarda {
		border: 1px solid #ff9900;
		font-size: 24rpx;
		width: 100%;
		text-align: center;
		line-height: 66rpx;
	}

	.tabcarda:nth-child(2n) {
		border-left: none;
		border-right: none;
	}

	.pitchOn {
		background-color: #ff9900;
	}
}

.coolopse {
	width: 95%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
}

.defrevese {
	width: 95%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
	padding-bottom: 20rpx;
	margin-top: 16rpx;

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ff9900;
		font-size: 30rpx;
		padding: 24rpx;
		padding-bottom: 0;
	}

	.yybuttn {
		width: 95%;
		height: 68rpx;
		text-align: center;
		color: #fff;
		background: #ff9900;
		line-height: 68rpx;
		border-radius: 24rpx;
		margin: auto;
		margin-top: 24rpx;
		font-size: 28rpx;
	}
}

.address {
	width: 95%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;

	.yyxx {
		font-size: 32rpx;
		margin-left: 25rpx;
		padding-top: 18rpx;
		margin-top: 18rpx;
	}

	.delete1 {
		height: 72rpx;
		padding: 0 50rpx 0 50rpx;
		font-size: 28rpx;
		border-radius: 75rpx;
		color: #ffffff;
		border: 1rpx solid #ff9900;
		font-weight: bold;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26%;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.additionOf {
		font-size: 26rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;

		.rem_text {
			color: #737373;
			margin-top: 15rpx;

			text {
				font-weight: bold;
				color: #000;
				padding-left: 20rpx;
			}
		}
	}

	.adderss_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		padding-top: 24rpx;

		.additionOf {
			font-size: 13px;
			padding-left: 13px;

			.rem_text {
				color: #737373;
				margin-top: 15rpx;

				text {
					font-weight: bold;
					color: #000;
					padding-left: 20rpx;
				}
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 40rpx;
			}

			.street {
				font-size: 28rpx;

				.title_tex {
					display: flex;
					align-items: center;

					.title_item {
						font-weight: 600;
						padding-right: 20rpx;
						font-size: 30rpx;
					}
				}
			}
		}

		.goAddd {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #f5c71c;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.remarks {
		font-size: 26rpx;
		padding-left: 25rpx;
		padding-bottom: 20rpx;

		.rem_text {
			color: #737373;
			margin-top: 15rpx;

			text {
				font-weight: bold;
				color: #000;
				padding-left: 20rpx;
			}
		}
	}
}
</style>
